{% extends 'base.html' %}

{% block title %}
  全部文章
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{% static 'css/articles.css' %}">
  <script src="{% static 'js/articles.js' %}"></script>

{% endblock %}

{% block main %}
  <main class="articles-container">


    <div class="articles-header">
      <h2 class="section-title">全部文章</h2>
      <div class="articles-controls">
        <div class="articles-count">
          <i class="fas fa-file-alt"></i> 共 {{ blogs|length }} 篇文章
        </div>
      </div>
    </div>

    <!-- 文章列表 -->
    <div class="articles-list">

      {% for blog in blogs %}

        <article class="compact-article-card">
          <div class="compact-article-img">
            <i class="fas fa-brain"></i>
          </div>
          <div class="compact-article-content">
            <div class="compact-article-meta">
              <div class="article-tag">{{ blog.category.name }}</div>
              <div class="compact-article-stats">
                <span><i class="far fa-calendar"></i> {{ blog.pub_time }}</span>
                <span><i class="far fa-comment"></i> {{ blog.comments.all|length }} 评论</span>
              </div>
            </div>
            <h3 class="article-title"><a href="{% url 'blog:detail' blog_id=blog.id %}">{{ blog.title }}</a></h3>
            <p class="article-excerpt">{{ blog.content|truncatechars:100 }}</p>
            <a href="{% url 'blog:detail' blog_id=blog.id %}" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>
          </div>
        </article>
      {% endfor %}
    </div>

    <!-- 分页控件 -->
    <div class="pagination">

      {% for page in pages %}

        <div class="page-item">

          {% if page == page_id %}
            <a href="{% url 'blog:articles' page_id=page %}" class="page-link active">{{ page }}</a>
          {% else %}
            <a href="{% url 'blog:articles' page_id=page %}" class="page-link">{{ page }}</a>

          {% endif %}

        </div>

      {% endfor %}

    </div>



  </main>
{% endblock %}
